<template>
	<view class="congonsf"  @click.native.stop="$emit('cancel')">
		<view class="Notice"  @click.native.stop>
			<view class="lrftCs" @click.native.stop="$emit('cancel')">x</view>
			
			<view class="title">输入甩单信息</view>
			<view class="subtitle">*点击发布人头像可直接私信，并可查看联系方式</view>
			<view class="xuanzhekuang">
				<view class="">甩单到</view> 
				<view class="">
					<ld-select :list="chatListvListInfo"
					                label-key="show_name" value-key="list_id"
					                placeholder="请选择"
					                clearable
					                v-model="show_name"
					                @change="selectChange"></ld-select>
				</view>
			</view>
			<!-- <textarea auto-height="true"
			          @input="inputText"
			          :value="textMsg"
			          @focus="textareaFocus"
			          :maxlength="-1"
			          :show-confirm-bar="false"
			          style="max-height: 190upx;overflow:auto;border: 1px solid black; border-radius: 17px;padding-top: 4px;padding-bottom: 4px; " />
			</view> -->
			
			<!-- <view class="em" @tap="chooseEmoji">
			  <view class="icon biaoqing"></view>
			</view> -->
			<view class="shuruluang">
				<textarea 
				 @input="inputText"
				 :value="textMsg"
				 @focus="textareaFocus"
				 :maxlength="-1"
				 :show-confirm-bar="false"
				 class="textarea" placeholder="请输入甩单信息，甩单请写具体地区！" />
			</view>
			<view class="consl">
				<vastwu-saveimg :imgListprop="photo_list" :num='1' :isBase64='true' :isSave='true' :size='180' @chooseImage='imglist_msg'  @delImg='del_imglist_msg'></vastwu-saveimg>
			</view>
			<view class="fasongConter" @click.native.stop="clickFun">
				发送
			</view>
			
			<view class="subtitle2">
				您当前还可以发布{{msg_num}}条甩单信息 
				<button class="button" open-type="share">去分享</button>
				<!-- <view class="button" open-type="share">分享增加</view> -->
			</view>
		</view>
	</view>
</template>
<style>
	
</style>
<script>
	import vastwuSaveimg from '@/components/vastwu-saveimg/vastwu-saveimg.vue'
	 import ldSelect from '@/components/UI/ld-select/ld-select.vue'
	 // chatting
	 import {
	 	Request
	 } from '@/utils/request.js';
	export default{
		components: {ldSelect,vastwuSaveimg},
		data(){
			return {
				photo_list:[],
				content:{"text":"","img":{}},
				imgUrlList:[],
				textMsg:"",
				show_name:'',
				list_id:'',
			}
		},
		props:{
			chatListvListInfo:{
				type:[Array],
				default:()=>[]
			},
			msg_num:{
				type:[Number,String],
				default:()=>0
			},
			// show_name:{
			// 	type:[Array],
			// 	default:()=>[]
			// }
		},
		// created() {
		// 	this.textMsg();
		// },
		watch: {
			show_name: function(newVal, oldVal) {
				if(newVal[0]){
					// console.log(this.textMsg(newVal[0]))
				}
			}
			// console.log(this.imgListprop)
			// this.imgList=this.imgListprop;
		},
		methods:{
			selectChange(e){
				this.list_id=e;
				this.isHistoryLoading=false;
				this.noMore=0;
				let _this=this;
				_get.addChat({
				  send_data: {
					list_id:e
				  },
				})
				this.chatListvListInfo.map((item)=>{
					if(item.list_id==e){
						this.show_name=item.show_name;
					}
				})
				
			},
			inputText(e){
				 let str = e.detail.value;
				 this.textMsg=str;
				this.$emit('inputText',e)
			},
			textareaFocus(e){
				this.$emit('textareaFocus',e)
			},
			clickFun(e){
				if(!this.show_name){
					uni.showToast({
					  title:"请选择要甩单的群",
					  duration:1000,
					  icon:"none"
					})
					return false;
				}
				// console.log(this.imgUrlList)
				if(this.imgUrlList.length){
					this.inmgUrlopen(e);
				}else{
					this.$emit('textMsgOK',e,'',this.show_name)
				}
			},
			inmgUrlopen(e){
				// this.imgUrlList
				let _this=this;
				let arrrConter={
					text:_this.textMsg,
					imgList:[],
				};
				for(var i =0;i<=this.imgUrlList.length;i++){
					if(this.imgUrlList[i]){
						// this.funsimgUrlList(this.imgUrlList[i])
						let {w,h}=this.imgUrlList[i];
						let msg = { url: this.imgUrlList[i].url, w: w, h: h};
						arrrConter.imgList.push(msg);
						if(this.imgUrlList.length==i+1){
							 this.$emit('sendMsg',arrrConter,2,this.show_name)
						}
					}
				}
				// setTimeout(()=>{
				// 	this.textMsg();
				// })
			},
			funsimgUrlList(imgUrlList){
				let _this=this;
				uni.uploadFile({
												url: 'https://im.xwjgene.com/im/upload/circle', //仅为示例，非真实的接口地址
												filePath: imgUrlList.url,
												name: 'file',
												header:{
													'Authori-zation':'Bearer '+uni.getStorageSync('token'),
													'Form-type':null
												},
												formData: {
													'user': 'test',
													len:1,
												},
												success: (uploadFileRes) => {
													
													 let {data} =JSON.parse(uploadFileRes.data);
													_this.textMsg('',{"url":data.save_name,"w":imgUrlList.w,"h":imgUrlList.h,"text":_this.content.text})
												}
											});
			},
			// im/message/textMsg
			textMsg(list_id,img){
				
				console.log(list_id);
				Request('im/message/textMsg',{
					list_id:list_id||this.show_name[0],
					content_type: img?2:0,
					content: JSON.stringify((img||this.content)),
					_agent_id: 1,
				},"POST").then((res)=>{
					this.$emit('textMsgOK')
				})
			},
			del_imglist_msg(){
				
			},
			imglist_msg(tempFilePaths){
				// /im/upload/circle
				let _this=this;
				for(var i =0;i<tempFilePaths.tempFilePath.length;i++){
					uni.getImageInfo({
					  src: tempFilePaths.tempFilePath[i],
					  success: (image) => {
					    let msg = { url:image.path, w: image.width, h: image.height };
						_this.imgUrlList.push(msg);
					  }
					});
				}
				
				console.log(tempFilePaths.tempFilePath)
				return false;
				
				
			},
		}
	}
</script>

<style>
	.xuanzhekuang{
		height: 88rpx;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		border: 1rpx solid #C4CAD4;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-left: 20rpx;
		margin-bottom: 16rpx;
		
	}
		
	.shuruluang{
		height: 240rpx;
		background: #F7F8FA;
		box-sizing: border-box;
		padding: 24rpx;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
	}
	.shuruluang .textarea{
		width: 100%;
		height: 100%;
	}
	.congonsf{
		width: 100vw;
		height: 100vh;
		background: rgba(0,0,0,.6);
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 99;
	}
	.Notice{
		position: absolute;
		bottom: 0;
		width: 100%;
		overflow: scroll;
		height: 927rpx;
		box-sizing: border-box;
		padding: 0 24rpx;
		padding-top: 40rpx;
		background: #FFFFFF;
		border-radius: 32rpx 32rpx 0rpx 0rpx;
	}
	.Notice .title{
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 40rpx;
		color: #181D24;
		padding-bottom: 20rpx;
		line-height: 36rpx;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}
	.fasongConter{
		width: 702rpx;
		height: 88rpx;
		background: #256FF3;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #FFFFFF;
		line-height: 88rpx;
		text-align: center;
		font-style: normal;
		text-transform: none;
	}
	.button{
		width: 160rpx;
		height: 36rpx;
		float: right;
		background: #256FF3;
		border-radius: 10rpx 10rpx 10rpx 10rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #FFFFFF;
		line-height: 36rpx;
		text-align: center;
		font-style: normal;
		text-transform: none;
	}
	.Notice .cpnterCons{
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #616974;
		height: 334rpx;
		overflow: scroll;
		line-height: 42rpx;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}
	.Notice .lrftCs	{
		position: absolute;
		right: 24rpx;
		top: 4rpx;
		color: #C3CAD5;
		font-size: 50rpx;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
	}
	.subtitle{
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #9298A0;
		line-height: 36rpx;
		text-align: left;
		font-style: normal;
		text-transform: none;
		padding-bottom: 40rpx;
	}
	.subtitle2{
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #9298A0;
		line-height: 46rpx;
		text-align: left;
		font-style: normal;
		text-transform: none;
		padding: 20rpx 0;
	}
	
</style>